import React, { useContext, useState, useCallback } from 'react';
import { Redirect, Route, Link } from 'react-router-dom';
import context from '../redux/context'
import { Layout, Menu } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
const { Header, Sider, Content } = Layout;

const PrivateRoute = (props) => {

  const { state, dispatch } = useContext(context);
  const [collapsed, setCollapsed] = useState(false)
  const toggle = useCallback(() => {
    setCollapsed(!collapsed)
  }, [collapsed])
  let { component: Cmp, ...rest } = props;

  if (!state.login) return <Redirect to={{ pathname: '/login' }} />

  const path = () => {
    console.log(window.location.hash)
    let hash = window.location.hash;
    if(hash.indexOf('#/home') > -1) return '#/'
    return hash
  }

  // return <Route
  //   {...rest}
  //   render={() =>  <Cmp {...props}/>}
  // />
  return <Layout className="app">
    <Sider trigger={null} collapsible collapsed={collapsed}>
      <div className="logo" >
        <Link to='/'>管理后台</Link>
      </div>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={[path()]}>
        <Menu.Item key="#/" icon={<UserOutlined />}>
          <Link to='/'>添加作品</Link>
        </Menu.Item>
        <Menu.Item key="#/list" icon={<VideoCameraOutlined />}>
          <Link to='/list'>作品列表</Link>
        </Menu.Item>
        <Menu.Item key="#/batch" icon={<VideoCameraOutlined />}>
          <Link to='/batch'>批量创建</Link>
        </Menu.Item>
        {/* <Menu.Item key="3" icon={<UploadOutlined />}>
          nav 3
      </Menu.Item> */}
      </Menu>
    </Sider>

    <Layout className="site-layout" style={{ padding: 20 }}>
      <Header className="site-layout-background" style={{ padding: 0 }}>
        {
          collapsed ? <MenuUnfoldOutlined className="trigger" onClick={toggle} /> : <MenuFoldOutlined className="trigger" onClick={toggle} />
        }

      </Header>
      <Content
        className="site-layout-background"
        style={{
          padding: 24,
          marginTop: 20,
          flex: 1
        }}
      >
        <Cmp {...rest} />
      </Content>
    </Layout>
  </Layout>


}

export default PrivateRoute



// export default connect(mapStateToProps, null)(withRouter(PrivateRoute))